<template>
	<view class="container" >
		<view class="card" v-for="item,index in tools" :key="index" @click="to(index)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tools:[{
					name:'思考',
					url:'/think/talk/talk',
				}
				,{
					name:'计划',
					url:'/think/plan/plan',
				}
				]
			}
		},
		methods: {
			to(index){
				uni.navigateTo({
					url:this.tools[index].url 
				})
			}
		}
	}
</script>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
  gap: 10px; /* 卡片之间的间隙 */
  padding: 10px; /* 容器内边距 */
  justify-content: center; /* 水平居中 */
  align-items: start; /* 垂直顶部对齐 */
}

.card {
  background-color: #FFFFFF; /* 白色背景 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  display: flex; /* 启用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 40px; /* 字体大小，根据需要调整 */
  text-align: center; /* 文本居中对齐 */
  aspect-ratio: 1 / 1; /* 保持正方形，如果需要 */
  font-weight: 600;
}
</style>
